<template>
	<view>
		<view class="top-back">
			<image src="@/static/09.png"></image>
		</view>

		<view class="logo"
			:style="'top:' + statusBarHeight + 'px; height:' + custom.height + 'px;line-height:' + custom.height + 'px;'">
			<image src="@/static/logo.png"></image>
			<text>{{ config.name }}</text>
		</view>

		<view class="top-image" :style="'margin-top:' + topImageTop + 'rpx'">
            <swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval='interval' next-margin="-20rpx">
                <view class="item" style="margin-right: 20rpx;">
                    <swiper-item v-for="(item,index) in config.index_image_arr" :key="index">
                        <image :src="item" style="border-radius: 32rpx;"></image>
                    </swiper-item>
                </view>
            </swiper>
			
		</view>

		<view class="tabs">
			<view class="s1" @click="goNews()">
				<view class="back"></view>
				<image src="@/static/01.png"></image>
				<text>{{ config.news_title }}</text>
			</view>

			<view class="s1" @click="show = true">
				<view class="back"></view>
				<image src="@/static/02.png"></image>
				<text>{{ config.zhibo_title }}</text>
			</view>

			<view class="s1" @click="goVr()">
				<view class="back"></view>
				<image src="@/static/03.png"></image>
				<text>虚拟展厅VR
				云逛展厅</text>
			</view>

			<view class="s1" @click="kefu_show = true">
				<view class="back"></view>
                <image src="@/static/04.png"></image>
                <text>客服</text>
			</view>
		</view>

		<view class="nav-title">
			<view class="title">- 大会详情 -</view>
			<view class="desc">VR SCENE DISPLAY</view>
		</view>

		<view class="cen" @click="getDetail()">
			<view class="title">{{ config.index_title }}</view>
			<view class="icon">
				<image src="@/static/07.png"></image>
				<text>时间：{{ config.index_time }}</text>
			</view>
			<view class="icon">
				<image src="@/static/08.png"></image>
				<text>地点：{{ config.index_address }}</text>
			</view>
			<view class="image" style="margin-top: 8rpx;">
				<image :src="config.index_image_1" mode="widthFix"></image>
			</view>
		</view>

		<u-popup :show="show_1" @close="isClose" mode='bottom' bgColor='transparent' :safeAreaInsetBottom='false'>
			<view class="zhibo" :class="{zhibo_1: config.zhibo == 0}">
				<view class="title">扫码查看{{ config.zhibo_title }}</view>
				<image class="qrcode" :src="config.qrcode" :show-menu-by-longpress="true"></image>
				<view class="noting">
					截图保存到手机相册 > 打开微信扫一扫
				</view>
		        <view class="yun_new">
		            <view class="s1" @click="goYun(2)">上届照片</view>
		            <view class="s1 s2" @click="goYun(1)">本届照片</view>
		        </view>
			</view>
		</u-popup>
        
        <u-popup :show="show" @close="isClose" mode='bottom' bgColor='transparent' :safeAreaInsetBottom='false'>
        	<view class="zb">
                <view class="s1" @click="goYun(1)">本届照片</view>
                <view class="s1" @click="goYun(2)">上届照片</view>
                <view class="s1" @click="goYun(3)">现场直播回顾</view>
        	</view>
        </u-popup>
        
        <u-popup :show="kefu_show" @close="isClose" mode='bottom' bgColor='transparent' :safeAreaInsetBottom='false'>
			<view class="kefu">
                <view class="s1" >
                    <button type="primary" plain="true" open-type="contact">
                        <image src="@/static/kufu.png"></image>
                    </button>
                    <text>联系客服</text>
                </view>
                <view class="s1" @click="goPhone()">
					<image src="@/static/dianhua.png"></image>
					<text>拨打电话</text>
                </view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { systemInfo } from '@/common/mixin.js'
	import config from '../../common/config-prod';
	export default {
		mixins: [systemInfo],
		data() {
			return {
				topImageTop: 0,
				show: false,
                show_1: false,
                kefu_show: false,
				config: {},
				autoplay: true,
				interval: 2000,
			}
		},
		onLoad() {
			this.getSystemInfo();
			this.topImageTop = (this.navHeight + 46) * 2;
			this.$API.commonConfig().then(res => {
				this.config = res.data
			})
		},
		methods: {
			isClose() {
				this.show = false
                this.kefu_show = false
			},
			goNews() {
				uni.navigateTo({
					url: '/pages/index/news'
				})
			},
			goYun(type) {
                if (type == 3) {
                    uni.navigateTo({
                        url: '/pages/index/h5?url=' + encodeURIComponent(this.config.zhibo_url)
                    })
                } else {
                    uni.navigateTo({
                        url: '/pages/index/yun?type=' + type
                    })
                }
			},
			goVr() {
				uni.navigateTo({
					url: '/pages/index/web?url=' + encodeURIComponent(this.config.vr_url)
				})
			},
			goPhone() {
				uni.makePhoneCall({
					phoneNumber: this.config.tel
				})
			},
			getDetail() {
				if (this.config.index_url != '') {
					uni.navigateTo({
						url: '/pages/index/detail?id=' + this.config.index_url
					})
				}
			}
		},
		onShareAppMessage() {
			return {
				title: '青梅产业大会',
				path: '/pages/index/index'
			}
		},
		onShareTimeline() {
			return {
				title: '青梅产业大会',
				path: '/pages/index/index'
			}
		}
	}
</script>

<style>

</style>

<style lang="scss">
	.logo {
		position: absolute;
		left: 38rpx;
		display: flex;
		align-items: center;

		image {
			width: 52rpx;
			height: 52rpx;
			margin-right: 12rpx;
			margin-top: 15rpx;
		}

		text {
			height: 52rpx;
			line-height: 52rpx;
			font-size: 36rpx;
			font-weight: bold;
			margin-top: 15rpx;
		}
	}

	.top-image {
		width: 670rpx;
		height: 336rpx;
		margin: 0 auto;
		position: relative;

        .swiper {
            width: 670rpx;
            height: 336rpx;
            border-radius: 32rpx;
            image {
                width: 670rpx;
                height: 336rpx;
            }
        }
	}

	.tabs {
		width: 670rpx;
		margin: 40rpx auto 0 auto;
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: space-between;

		.s1 {
			position: relative;
			width: 152rpx;
			height: 175rpx;

			.back {
				position: absolute;
				width: 152rpx;
				height: 124rpx;
				bottom: 0;
				left: 0;
				background: linear-gradient(180deg, #D2FCC3 0%, #EDFCDE 100%);
				border-radius: 32rpx;
			}
            
            image {
            	width: 152rpx;
            	height: 128rpx;
            	position: absolute;
            	left: 0;
            	top: 0;
            }
            
            button {
                width: 152rpx;
                height: 128rpx;
                border: 0;
                background: none;
            }
            text {
            	width: 100%;
            	height: 50rpx;
            	line-height: 32rpx;
            	font-size: 24rpx;
            	color: #333333;
            	text-align: center;
            	position: absolute;
            	left: 0;
            	bottom: 0;
            }
            
			&:nth-child(2) {
				.back {
					background: linear-gradient(180deg, #DEDFF0 0%, rgba(232, 236, 242, 0.62) 100%);
				}
			}

			&:nth-child(3) {
				.back {
					background: linear-gradient(180deg, #E7D9EF 0%, #F0E9F2 100%);
				}
                text {
                    height: 68rpx;
                }
			}

			&:nth-child(4) {
				.back {
					background: linear-gradient(180deg, #F4EDD4 0%, #F3F3E2 100%);
				}
			}

			
		}
	}

	.nav-title {
		width: 100%;
		margin: 68rpx auto 0 auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;

		.title {
			width: 100%;
			height: 40rpx;
			font-size: 32rpx;
			font-weight: 600;
			color: #333333;
			line-height: 40rpx;
		}

		.desc {
			width: 100%;
			height: 32rpx;
			font-size: 20rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 32rpx;
		}
	}

	.cen {
		width: 590rpx;
		background: linear-gradient(180deg, #F7FFFA 0%, #FFFFFF 100%);
		border-radius: 32rpx;
		margin: 28rpx auto 100rpx auto;
		padding: 40rpx;

		.title {
			width: 590rpx;
			height: 96rpx;
			font-size: 32rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			color: #333333;
			line-height: 48rpx;
		}

		.icon {
			width: 590rpx;
			height: 36rpx;
			font-size: 24rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 36rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-top: 16rpx;

			image {
				width: 32rpx;
				height: 36rpx;
				margin-right: 8rpx;
			}
		}

		.image {
			image {
				width: 590rpx;
				// height: 412rpx;
			}
		}
	}

	.zhibo {
		width: 750rpx;
		height: 920rpx;
		background: linear-gradient(180deg, #F6FBEE 0%, #FFFFFF 100%);
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		position: relative;
	
		.title {
			width: 100%;
			height: 40rpx;
			font-size: 36rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			color: #000000;
			line-height: 40rpx;
			text-align: center;
			position: absolute;
			top: 60rpx;
			left: 0;
		}
	
		.qrcode {
			position: absolute;
			width: 429rpx;
			height: 429rpx;
			top: 154rpx;
			left: 160rpx;
		}
	
		.noting {
			position: absolute;
			color: rgba(47, 140, 158, 1);
			font-size: 28rpx;
			font-weight: normal;
			text-align: center;
			white-space: nowrap;
			line-height: 32rpx;
			align-self: center;
			margin-top: 20rpx;
			top: 612rpx;
			width:100%;
		}
	
	    .yun_new {
	        position: absolute;
	        width: 504rpx;
	        height: 100rpx;
	        bottom: 100rpx;
	        left: 124rpx;
	        display: flex;
	        flex-direction: row;
	        justify-content: space-between;
	        .s1 {
	            width: 240rpx;
	            height: 100rpx;
	            background: #FFFFFF;
	            border-radius: 24rpx;
	            border: 2rpx solid #D7D7D7;
	            text-align: center;
	            line-height: 100rpx;
	            font-size: 32rpx;
	            font-family: PingFangSC, PingFang SC;
	            font-weight: 400;
	            color: #7E7E7E;
	        }
	        .s2 {
	            background: linear-gradient(90deg, #E9FACC 0%, #B7EEF0 100%);
	            border: none;
	            color: #2D4D53;
	        }
	    }
	
		.yun {
			position: absolute;
			width: 480rpx;
			height: 160rpx;
			background: linear-gradient(90deg, #E9FACC 0%, #B7EEF0 100%);
			border-radius: 32rpx;
			bottom: 100rpx;
			left: 134rpx;
	
			image {
				width: 108rpx;
				height: 100rpx;
				position: absolute;
				left: 56rpx;
				top: 30rpx;
			}
	
			.ce {
				width: 250rpx;
				height: 100rpx;
				position: absolute;
				top: 34rpx;
				left: 212rpx;
	
				text:nth-child(1) {
					width: 250rpx;
					height: 44rpx;
					font-size: 32rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #000000;
					line-height: 44rpx;
					display: block;
				}
	
				text:nth-child(2) {
					width: 250rpx;
					height: 40rpx;
					font-size: 26rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #666666;
					line-height: 40rpx;
					display: block;
				}
			}
		}
	}
    .zhibo_1 {
        height: 251rpx;
        .title {
            display: none;
        }
        .qrcode {
            display: none;
        }
        .noting {
            display: none;
        }
    }
    .zb {
    	width: 750rpx;
    	height: 428rpx;
    	background: linear-gradient(180deg, #F6FBEE 0%, #FFFFFF 100%);
    	border-radius: 40rpx 40rpx 0rpx 0rpx;
    	position: relative;
        display: flex;
        flex-direction: column;
    
    	.s1 {
    		width: 750rpx;
    		height: 120rpx;
    		background: #FFFFFF;
            border-bottom: 8rpx solid #F6F5F8;
            font-size: 32rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #303133;
            line-height: 120rpx;
            text-align: center;
    	}
    }
    .kefu {
        width: 496rpx;
        height: 274rpx;
        background: linear-gradient(180deg, #F6FBEE 0%, #FFFFFF 100%);
        border-radius: 24rpx 24rpx 0 0;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 92rpx 127rpx 0 127rpx;
        .s1 {
            display: flex;
            flex-direction: column;
            text-align: center;
            button {
                width: 160rpx;
                height: 160rpx;
                border: 0;
                padding: 0;
            }
            image {
                width: 160rpx;
                height: 160rpx;
            }
            text {
                font-size: 28rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #000000;
            }
        }
    }
</style>